<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>票务系统可视化报表</title>
    <script src="./rests/cardstyle.3"></script>
    <link rel="stylesheet" href="../../style/all.min.css" />
    <script src="../../utils/vue.min.js"></script>
    <script src="../../utils/chart.min.js"></script>
    <style>
      body {
        font-family: "Noto Sans SC", sans-serif;
        background-color: #f8fafc;
        color: #1e293b;
      }

      .glass-card {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }
      .chart-container {
        height: 300px;
        position: relative;
      }
      .nav-link {
        position: relative;
      }
      .nav-link::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #3b82f6;
        transition: width 0.3s ease;
      }
      .nav-link:hover::after {
        width: 100%;
      }
      .stat-card {
        transition: all 0.3s ease;
      }
      .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .animate-fade-in {
        animation: fadeIn 0.6s ease-out forwards;
      }
      .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 10;
      }
      .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 10px;
      }
      .loading-text {
        color: #666;
        font-size: 14px;
        margin: 0;
      }
    </style>
  </head>
  <body class="min-h-screen">
    <div id="app">
      <!-- 导航栏 -->
      <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div
          class="container mx-auto px-4 py-3 flex justify-between items-center"
        >
          <div class="flex items-center">
            <i class="fas fa-ticket-alt text-blue-500 text-2xl mr-2"></i>
            <span class="text-xl font-bold text-gray-800"
              >票务系统可视化报表</span
            >
          </div>
          <div class="hidden md:flex space-x-8">
            <a
              href="#forecast"
              class="nav-link text-gray-600 hover:text-blue-500"
              >客流预测</a
            >
            <a
              href="#comparison"
              class="nav-link text-gray-600 hover:text-blue-500"
              >预订对比</a
            >
            <a
              href="#distribution"
              class="nav-link text-gray-600 hover:text-blue-500"
              >客流分布</a
            >
            <a
              href="#history"
              class="nav-link text-gray-600 hover:text-blue-500"
              >历史分析</a
            >
          </div>
          <button
            class="md:hidden text-gray-600 focus:outline-none"
            id="mobileMenuBtn"
          >
            <i class="fas fa-bars text-xl"></i>
          </button>
        </div>
      </nav>
      <!-- 主要内容 -->
      <main class="mx-auto px-4 py-8" style="max-width: 100%">
        <!-- 概览统计 -->
        <section class="mb-12 grid grid-cols-1 md:grid-cols-4 gap-6">
          <div
            class="glass-card stat-card p-6 animate-fade-in"
            style="animation-delay: 0.1s"
          >
            <div class="flex items-center">
              <div class="bg-blue-100 p-3 rounded-full mr-4">
                <i class="fas fa-users text-blue-500 text-xl"></i>
              </div>
              <div>
                <p class="text-gray-500 text-sm">今日到访</p>
                <p class="text-2xl font-bold text-gray-800">{{top.dayd}}</p>
              </div>
            </div>
          </div>
          <div
            class="glass-card stat-card p-6 animate-fade-in"
            style="animation-delay: 0.2s"
          >
            <div class="flex items-center">
              <div class="bg-green-100 p-3 rounded-full mr-4">
                <i class="fas fa-calendar-check text-green-500 text-xl"></i>
              </div>
              <div>
                <p class="text-gray-500 text-sm">今日预订</p>
                <p class="text-2xl font-bold text-gray-800">{{top.dayy}}</p>
              </div>
            </div>
          </div>
          <div
            class="glass-card stat-card p-6 animate-fade-in"
            style="animation-delay: 0.3s"
          >
            <div class="flex items-center">
              <div class="bg-purple-100 p-3 rounded-full mr-4">
                <i class="fas fa-percentage text-purple-500 text-xl"></i>
              </div>
              <div>
                <p class="text-gray-500 text-sm">到访率</p>
                <p class="text-2xl font-bold text-gray-800">{{top.dfl}}%</p>
              </div>
            </div>
          </div>
          <div
            class="glass-card stat-card p-6 animate-fade-in"
            style="animation-delay: 0.4s"
          >
            <div class="flex items-center">
              <div class="bg-yellow-100 p-3 rounded-full mr-4">
                <i class="fas fa-chart-bar text-yellow-500 text-xl"></i>
              </div>
              <div>
                <p class="text-gray-500 text-sm">预订转化率</p>
                <p class="text-2xl font-bold text-green-500">+{{top.zhl}}%</p>
              </div>
            </div>
          </div>
        </section>

        <!-- 客流量趋势预测 -->
        <section id="forecast" class="mb-12">
          <div class="glass-card p-6 mb-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
              <i class="fas fa-chart-line text-blue-500 mr-3"></i
              >景点实时客流量趋势
            </h2>
            <div class="chart-container">
              <div v-if="Chart14" class="loading-overlay">
                <div class="loading-spinner"></div>
                <p class="loading-text">数据加载中...</p>
              </div>
              <canvas id="forecastChart14" v-show="!Chart14"></canvas>
            </div>
          </div>
        </section>

        <!-- 预订与实际到访对比 -->
        <section id="comparison" class="mb-12">
          <div class="glass-card p-6 mb-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
              <i class="fas fa-exchange-alt text-blue-500 mr-3"></i
              >预订与实际到访对比
            </h2>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
              <div>
                <div class="chart-container">
                  <canvas id="dailyComparisonChart"></canvas>
                </div>
                <p class="text-sm text-gray-500 mt-2">每日预订与实际到访对比</p>
              </div>
              <div>
                <div class="chart-container">
                  <canvas id="weeklyComparisonChart"></canvas>
                </div>
                <p class="text-sm text-gray-500 mt-2">每周预订与实际到访对比</p>
              </div>
            </div>
          </div>
        </section>

        <!-- 客流分布分析 -->
        <section id="distribution" class="mb-12">
          <div class="glass-card p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
              <i class="fas fa-pie-chart text-blue-500 mr-3"></i>客流分布分析
            </h2>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
              <div>
                <div class="chart-container">
                  <canvas id="timeDistributionChart"></canvas>
                </div>
                <p class="text-sm text-gray-500 mt-2">时段分布</p>
              </div>
              <div>
                <div class="chart-container">
                  <canvas id="ticketTypeChart"></canvas>
                </div>
                <p class="text-sm text-gray-500 mt-2">票种占比</p>
              </div>
            </div>
          </div>
        </section>

        <!-- 历史数据分析 -->
        <section id="history" class="mb-12">
          <div class="glass-card p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
              <i class="fas fa-history text-blue-500 mr-3"></i>历史数据分析
            </h2>
            <div class="grid grid-cols-1 lg:grid-cols-1 gap-8">
              <!-- <div>
                <div class="chart-container">
                  <canvas id="monthlyHistoryChart"></canvas>
                </div>
                <p class="text-sm text-gray-500 mt-2">3个月历史数据趋势</p>
              </div> -->
              <div>
                <div class="chart-container">
                  <canvas id="yearlyHistoryChart"></canvas>
                </div>
                <p class="text-sm text-gray-500 mt-2">预定票和核销情况</p>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
    <script src="./js/ticketing_System.js"></script>
    <script>
      // 移动端菜单切换
      document
        .getElementById("mobileMenuBtn")
        .addEventListener("click", function () {
          const menu = document.getElementById("mobileMenu");
          menu.classList.toggle("hidden");
        });

      // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        anchor.addEventListener("click", function (e) {
          e.preventDefault();
          document.querySelector(this.getAttribute("href")).scrollIntoView({
            behavior: "smooth",
          });
          // 如果是移动端菜单，点击后隐藏菜单
          if (this.parentElement.id === "mobileMenu") {
            document.getElementById("mobileMenu").classList.add("hidden");
          }
        });
      });
    </script>
  </body>
</html>
